<template>
  <div>
    <div>这是用户管理的页面~</div>
    <p></p>
    <button v-on:click="getAllUsers">获取所有学生</button>
    <div v-for="user in users" v-bind:key = user.id>
        {{user}}
    </div>

    <p></p>
    <div>
      请输入要查询的学生id
      <input v-model="queryId">
    </div>
    <button v-on:click="getUserById">查询</button>
    <div>{{userById}}</div>

    <p></p>
    <div>
      请输入要添加的用户的信息

      <div>
        学号:
        <input v-model="student_id">
      </div>
      <div>
        姓名:
        <input v-model="username">
      </div>
      <div>
        班级:
        <input v-model="class_name">
      </div>
      <div>
        手机号:
        <input v-model="telephone">
      </div>
      <div>
        qq:
        <input v-model="qq">
      </div>
      <button v-on:click="addUser">添加</button>
      <div>{{rs_add}}</div>
    </div>

    <p></p>
    <div>
      请输入要修改的用户id
      <input v-model="id">
      <div>
        学号:
        <input v-model="student_id">
      </div>
      <div>
        姓名:
        <input v-model="username">
      </div>
      <div>
        班级:
        <input v-model="class_name">
      </div>
      <div>
        手机号:
        <input v-model="telephone">
      </div>
      <div>
        qq:
        <input v-model="qq">
      </div>
    </div>
    <button v-on:click="updateUser" >确认修改</button>
    <div>{{rs_update}}</div>

    <p></p>
    <div>
      请输入删除用户的id：
      <input v-model = "deleteId">
      <div>
        <button v-on:click="deleteUser">删除用户</button>
        <div>{{rs_delete}}</div>
      </div>
    </div>
  </div>



</template>

<script>

import axios from "axios";
export default {
  name: "User",

  data(){
    return{
      users:null,
      queryId:null,
      userById:null,
      username:null,
      student_id:null,
      class_name:null,
      telephone:null,
      qq:null,
      rs_add:null,
      rs_update:null,
      rs_delete:null,
      id:null,
      deleteId: null
    }
  },

  methods:{
    getAllUsers(){
      axios.get("http://localhost:8081/students")
          .then(resp=> {
            console.log(resp);
            this.users = resp.data;
              })
    },

    getUserById(){
      axios.get(`http://localhost:8081/student/${this.queryId}`)
          .then(resp=> {
            console.log(resp);
            this.userById = resp.data;
          })
    },

    addUser(){
      axios.post("http://localhost:8081/student",{
        username:this.username,
        address:this.address
      }).then(resp=> {
            console.log(resp);
            this.rs_add = resp.data;
          })
    },

    updateUser(){
      axios.put("http://localhost:8081/student",{
        id:this.id,
        username:this.username,
        address:this.address
      }).then(resp=> {
        console.log(resp);
        this.rs_update = resp.data;
      })
    },

    deleteUser(){
      axios.delete("http://localhost:8081/student",{
        params:{
          id:this.deleteId
        }
      }).then(resp=> {
        console.log(resp);
        this.rs_delete = resp.data;
      })
    }

  }
}
</script>

<style scoped>

</style>